<template>
  <!-- 证件预览 -->
  <view>
    <view class="text-row">
      <span>证件信息已安全加密，实时保障信息安全</span>
      <p>温馨提示：个人证件信息30天内仅允许修改2次</p>
    </view>
    <view class="img-load">
      <img :src=" staffCertification.idCardFrontImg" alt="">
      <span>证件正面</span>
    </view>
    <view class="img-load" style="margin:50rpx 0;">
      <img :src="staffCertification.idCardBackImg" alt="">
      <span>证件反面</span>
    </view>

    <view style="text-align: center;">
      证件过期时间：{{ staffCertification.credentialExpDate }}
      <span
          v-if="staffCertification.credentialStatus == 0"
          class="color-text"
          @click="toPerfectInfo"
      >证件无效，点击重新上传
      </span>
      <span
          v-if="staffCertification.credentialStatus == 1"
          class="color-text"
          style="color: #00a660;"
          @click="toPerfectInfo"
      >证件有效，点击修改
      </span>
      <span
          v-if="staffCertification.credentialStatus == 2"
          class="color-text"
      >证件审核中，请耐心等待...
      </span>
      <span
          v-if="staffCertification.credentialStatus == 3"
          class="color-text"
          @click="toPerfectInfo"
      >证件上传，点击完善证件
      </span>
      <span
          v-if="staffCertification.credentialStatus == 4"
          @click="toPerfectInfo"
          class="color-text"
      >证件已过期，点击重新上传
      </span>
    </view>

  </view>
</template>

<script>

export default {
  data() {
    return {
      staffCertification: {}, //认证信息
    }
  },
  onLoad(option) {
    this.staffCertification = JSON.parse(decodeURIComponent(option.staffCertification));
  },
  methods: {
    /** 立即完善跳转页面  */
    toPerfectInfo() {
      uni.navigateTo({url: './perfectInfo'});
    },
  }
}
</script>

<style scoped lang="scss">
.img-load {
  text-align: center;
  margin-top: 30rpx;

  img {
    border: 1rpx dashed #ccc;
    width: 540rpx;
    height: 324rpx;
    display: block;
    margin: 0 auto 8rpx;
    border-radius: 10rpx;
  }

  span {
    color: #777;
  }
}

.color-text {
  margin-left: 20rpx;
  color: $uni-color-error;
}

.text-row {
  text-align: center;
  margin: 26rpx 0;

  p {
    color: $uni-color-primary;
    margin: 10rpx 0;
  }
}

page {
  background: $uni-bg-color-grey;
}
</style>
